<!DOCTYPE html>
<html lang="zh-HK">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站 | 歡迎光臨</title>
    <style>
        body {
            font-family: "Microsoft JhengHei", "標楷體", "PMingLiU", sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        header {
            background-color: #003366;
            color: white;
            padding: 1rem 2rem;
            text-align: center;
        }
        nav {
            background-color: #004c99;
            padding: 0.8rem;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        nav li {
            display: inline-block;
            margin: 0 15px;
        }
        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .container {
            max-width: 1000px;
            margin: 2rem auto;
            padding: 0 1.5rem;
        }
        .hero {
            text-align: center;
            padding: 2rem 1rem;
            background: linear-gradient(to bottom, #e6f2ff, #ffffff);
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        footer {
            background-color: #333;
            color: #ccc;
            text-align: center;
            padding: 1.2rem;
            margin-top: 3rem;
        }
        .btn {
            display: inline-block;
            background-color: #0055aa;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            margin-top: 1rem;
        }
        .btn:hover {
            background-color: #004080;
        }
    </style>
</head>
<body>

<header>
    <h1>我的網站</h1>
    <p>分享生活、科技與創意的一方天地</p>
</header>

<nav>
    <ul>
        <li><a href="#home">主頁</a></li>
        <li><a href="#about">關於我</a></li>
        <li><a href="#services">服務項目</a></li>
        <li><a href="#contact">聯絡我們</a></li>
        <li><a href="#login">登入</a></li>
    </ul>
</nav>

<div class="container">
    <section id="home" class="hero">
        <h2>歡迎來到我的網站！</h2>
        <p>呢度係我分享個人作品、技術筆記同生活點滴嘅地方。</p>
        <a href="#about" class="btn">了解更多</a>
    </section>

    <section id="about">
        <h2>關於我</h2>
        <p>你好！我係香港本地嘅網頁設計師兼程式開發員，熱愛將創意融入科技。自2018年起投身IT行業，主力開發響應式網頁同互動應用程式。</p>
        <p>閒時鍾意攝影、行山同試新餐廳，亦會喺社交平台分享香港本地文化同城市探索故事。</p>
    </section>

    <section id="services">
        <h2>服務項目</h2>
        <ul>
            <li>✅ 網頁設計與開發（HTML / CSS / JavaScript / React）</li>
            <li>✅ 響應式網站（手機、平板、電腦自適應）</li>
            <li>✅ 網站優化（SEO + 速度提升）</li>
            <li>✅ 內容管理系統（WordPress 定製）</li>
            <li>✅ IT技術教學（一對一或小班工作坊）</li>
        </ul>
    </section>

    <section id="contact">
        <h2>聯絡我們</h2>
        <p>有任何查詢或合作意向？歡迎透過以下方式聯絡：</p>
        <p>📧 電郵：<a href="mailto:contact@mysite.hk">contact@mysite.hk</a><br>
        📱 WhatsApp：<a href="https://wa.me/85291234567">+852 9123 4567</a><br>
        📍 地址：香港九龍尖沙咀科學館道1號</p>
    </section>
</div>

<footer>
    <p>© 2025 我的網站．版權所有．<a href="#" style="color:#999">私隱政策</a> | <a href="#" style="color:#999">使用條款</a></p>
    <p>本網站採用香港繁體中文書寫｜最後更新：2025年11月9日</p>
</footer>

</body>
</html>